<!-- 查看日志列表 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      title="查看日志"
      centered
      :bodyStyle="{
        padding: '0 24px'
      }"
      width="75vw"
      :visible="visible"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-card
        :bordered="false"
        :bodyStyle="{
          padding: '10px 24px'
        }"
        style="width: 100%; height: 80vh; overflow-y: auto;">
        <a-table
          bordered
          ref="table"
          rowKey="id"
          :scroll="scrollTrigger"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp"
          :loading="loading">
          <span slot="operateType" slot-scope="text">{{operateTypeText(text)}}</span>
        </a-table>
      </a-card>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import {filterObj} from '@/utils/util';
  import {getAction} from '@/api/manage'

  export default {
    name: "ViewLogModalList",
    components: {},
    data() {
      return {
        id: '',
        queryParam: {},
        loading: false,
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '用戶',
            align: "center",
            dataIndex: 'username'
          },
          {
            title: '操作类型',
            align: "center",
            dataIndex: 'operateType',
            scopedSlots: { customRender: 'operateType' },
          },
          {
            title: '操作时间',
            align: "center",
            dataIndex: 'operateTime'
          }
        ],
        dataSource: [],
        choseObj: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        scrollTrigger: {x:true},
        visible: false,
      }
    },
    methods: {
      operateTypeText (text) {
        if(text === '1') return "创建";
        if(text === '2') return "编辑";
        if(text === '3') return "删除";
        if(text === '4') return "查看";
        if(text === '5') return "下载";
      },
      initLoad() {
        this.loadData();
        // 该方法触发屏幕自适应
        this.resetScreenSize();
      },
      add(id) {
        this.visible = true;
        this.id = id || ''
        this.initLoad();
      },
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        let url = `/api/erp/oa/fileManager/log/list?id=${this.id}&page=${params.pageNo}&limit=${params.pageSize}`
        this.loading = true
        getAction(url).then((res) => {
          if (res.code == 200) {
            this.dataSource = res.data;
            this.ipagination.total = res.total;
            // }
            //判断是否当前页没有数据且不为第一页
            if (this.dataSource.length == 0 && this.ipagination.current != 1) {
              this.ipagination.current = this.ipagination.current - 1
              this.loadData(this.ipagination.current - 1);
            }
          }
        }).finally(() => {
            this.loading = false
          }
        )
      },
      getQueryParams() {
        let param = {}
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      handleTableChange(pagination, filters, sorter) {
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      handleCancel() {
        this.visible = false;
      },
      // 触发屏幕自适应
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = {x: 800};
        } else {
          this.scrollTrigger = {};
        }
      }
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

</style>